auto min max-content in css Grid

13333333
min-height:20px
2
3333333
4
555555 heheh zzzz
ff kjkj

啊啊

last

1.我们发现item3 设置成grid-column:2/3 会发现 浏览器会把在item3后面的且没有明确设置的item 直接跟随item3 位置后面

2.我们设置成column 23 auto 可以发现column 2 3 是跟随浏览器最大宽度的设置

3.如果设置 row 23 也是auto会怎么样?

那么到底什么是min 和 max呀?按我猜测 max和min的意思 其实是行或列按照最大或者最小的item而设置 不是的 不是的 这其实很好理解的啊

max:
min:

4.对于column而言 max-content 根据内容调整宽度。min-content就是把文字之间的一堆空格(包括br 但不包括block元素中的空格)转换成换行

这设置了min-content 啊啊 设置了一定的width 这里也有所不同 heheh没有换行

5.对于row而言

6. grid-column:1/ span 2; span是什么东西 其实这个就是等于 grid-colunm:1/3 span是1的意思吧(你当他等于 夸 2 span 3 就是 跨3) 你也可以写成 grid-column:1/ 2 span;(也就是顺序不同而已)
grid-column:1/ miao span;(这个miao是列之间的名称 其实他就是2) 。
错误写法 span span ;

建议用float 当你所有item都是拥有一样的宽高比 display :inline-block | inline 这样会有默认行高哦?然后设置成block 这样我们就可以不要行高了

现在Grid的兼容性非常好了 现在是level one阶段 假如你有文字作为item 那么这个对于开发者是anonymous item但对用户来说是存在的 subgrid将要到来(这个应该就是 我的example那样继承了吧)

grid-gap是无法放置内容的 假如你想放置内容 你可以设置大的track和小的track这样来制造小cell大cell

caniuse.com/#/search-CSS Grid
文章目录
|